<template>
	<view>
		<view>
			<view class="container">
				<view class="form-box">


					<view class="form-item">
						<u--input placeholder="请输入用户名" v-model="username" border="bottom" clearable focus></u--input>
					</view>
					<view class="form-item">
						<u--input placeholder="请输入手机号" v-model="phone" border="bottom" clearable></u--input>
					</view>
					<view class="form-item">
						<u--input placeholder="请输入密码" v-model="password" border="bottom" type="password" clearable></u--input>
					</view>

					<view class="form-item">
						<u--input placeholder="请确认密码" v-model="repeatPassword" border="bottom" type="password" clearable></u--input>
					</view>

					<view class="form-item-code">
						<view class="form-item code-item">
							<!-- <input class="code" placeholder="验证码" /> -->
							<u--input placeholder="请输入验证码" v-model="codeNum" border="bottom" clearable></u--input>
						</view>
						<view class="code-btn" @click="btnCode">{{code}}</view>
					</view>

					<button type="primary" class="register-btn" @click="passwordReset">密码重置</button>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				code: '获取验证码',
				password: '',
				repeatPassword: '',
				phone: '',
				codeNum: '',
				username: '',
			};
		},
		computed: {
			
			...mapState("login", ["accountNumber"])
		},
		onLoad(){
			uni.$setNavigationBarColor()
		},
		methods: {
			...mapMutations("login", ["updatePassword"]),
			//验证码
			btnCode() {
				let sum = []
				let num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
				for (let i = 0; i < 6; i++) {
					let v = parseInt(Math.random() * 10)
					sum.push(v)
				}
				this.code = sum.join("")
			},
			//密码重置
			passwordReset() {
				let repeatPhone = void 0
				let samePassword = void 0
				let sameUsername = void 0

				if (this.accountNumber.length > 0) {
					sameUsername = this.accountNumber.some(item => item.username == this.username)
					if (!sameUsername) {
						uni.$showToast('没有该用户,请注册', 'error')
						
						return uni.navigateTo({
							url: '/subCustomer/register/register'
						})

					}

					repeatPhone = this.accountNumber.filter(item => item.username == this.username).some(item => item.phone == this
						.phone)
					samePassword = this.accountNumber.filter(item => item.username == this.username).some(item => item.password ==
						this.password)

				}
				if (this.phone == '') {
					return uni.$showToast('请输入手机号!', 'error')
				} else if (this.codeNum == ' ') {
					return uni.$showToast('请输入验证码!', 'error')
				} else if (this.password == ' ') {
					return uni.$showToast('请输入密码!', 'error')
				} else if (this.repeatPassword == ' ') {
					return uni.$showToast('请确认密码!', 'error')
				} else if (!repeatPhone) {
					return uni.$showToast('手机号输入错误', 'error')
				} else if (this.password !== this.repeatPassword) {
					return uni.$showToast('密码不相同!', 'error')
				} else if (this.codeNum !== this.code) {
					return uni.$showToast('验证码错误！', 'error')
				} else if (samePassword) {
					return uni.$showToast('原始密码相同！', 'error')
				}
				if (this.username == '') {
					return uni.$showToast('请输入用户名!', 'error')
				}
				if (!sameUsername) {
					return uni.$showToast('用户名输入错误!', 'error')
				} else {
					this.updatePassword({
						newPassword: this.password,
						username: this.username
					})
					uni.$showToast('修改密码成功')
					uni.navigateTo({
						url: '/subUserInfo/loginRegistration/loginRegistration'
					})
				}
			}
		},
	}
</script>


<style lang="scss">
	.container {
		padding: 200rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.register-btn {
			background-color: #c80000;
		}

		.form-item {
			margin: 40rpx 0;
		}

		.form-item-code {
			display: flex;
			justify-content: center;
			align-items: center;

			.code-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100px;
				height: 30px;
				padding: 20rpx 40rpx;
				border: 1px solid #d9d9d9;
				border-radius: 10rpx;
				color: #fff;
				background: #3c9cff;

				&:active {
					background-color: #1a73e8;
				}
			}
		}
	}
</style>